
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>API 使用手册</title>
    <link th:href="@{/layui-v2.5.5/css/layui.css}" rel="stylesheet"/>
    <link th:href="@{/api/index.css}" rel="stylesheet"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">API 使用手册</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="javascript:;">控制台</a></li>
            <!--<li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>-->
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">

                <li class="layui-nav-item" th:each="obj:${explainList}">
                    <a class="" href="javascript:;" th:text="${obj.explain.name}">所有商品333</a>
                    <dl class="layui-nav-child">
                        <dd th:each="oper:${obj.operationList}" th:attr="operVal=${#strings.replace(oper.value, '.', '_')}" class="single_nav_dd"><a href="javascript:;" th:text="${oper.name}">列表一</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            点击左边菜单查看对应接口说明：
            <hr class="layui-bg-orange"/>

            <div th:remove="tag" th:each="obj:${explainList}">
                <div class="singleApi" th:each="oper:${obj.operationList}" th:id="|${#strings.replace(oper.value, '.', '_')}|">
                    <blockquote class="layui-elem-quote">
                        功能名称：<span th:text="${obj.explain.name}">用户管理</span>（<span class="notes" th:text="${obj.explain.notes}">后台用户管理</span>），服务名称：<b class="serviceName" th:text="${obj.explain.value}">adminUserService</b>
                    </blockquote>
                    <blockquote class="layui-elem-quote layui-quote-nm">
                        接口名称：<span th:text="${oper.name}">用户列表</span>（<span class="notes" th:text="${oper.notes}">用户列表</span>），接口名称：<b class="serviceName" th:text="${oper.value}">list</b>
                    </blockquote>
                    接口参数对照表：
                    <hr class="layui-bg-green"/>
                    <h4 th:if="${#lists.size(oper.paramList) le 0}" style="padding-bottom:12px">无参数</h4>
                    <table class="layui-table" th:if="${#lists.size(oper.paramList) gt 0}">
                        <thead>
                        <tr>
                            <th>参数名</th>
                            <th>描述</th>
                            <th>类型</th>
                            <th>是否必须</th>
                            <th>示例</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="par : ${oper.paramList}">
                            <td th:text="${par.value}">username</td>
                            <td th:text="${par.name}">用户名</td>
                            <td th:text="${par.type}">String</td>
                            <td th:text="${par.require}">true</td>
                            <td th:text="${par.example}">admin</td>
                        </tr>
                        </tbody>
                    </table>

                    接口返回数据对照表：
                    <hr class="layui-bg-red"/>
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>字段</th>
                            <th>类型</th>
                            <th>说明</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="res : ${oper.returnList}">
                            <td th:text="${res.field}">字段</td>
                            <td th:text="${res.type}">类型</td>
                            <td th:text="${res.notes}">说明</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div style="padding: 15px;">
            API接口请求结果说明：
            <hr class="layui-bg-blue"/>

            <div th:remove="tag" th:each="obj:${explainResultList}">
                <div class="singleResult">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend th:text="${obj.result.name}">字段集区块 - 横线风格</legend>
                        <div class="layui-field-box">
                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>描述</th>
                                    <th>类型</th>
                                    <th>说明</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="field : ${obj.fieldList}">
                                    <td th:text="${field.value}">username</td>
                                    <td th:text="${field.name}">用户名</td>
                                    <td th:text="${field.type}">String</td>
                                    <td th:text="${field.notes}">描述</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © 2019 CreateBy zsl
    </div>
</div>
<script th:src="@{/layui-v2.5.5/layui.js}"></script>
<script th:src="@{/jquery/jquery-1.12.3.min.js}"></script>
<script th:src="@{/api/index.js}"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
    var element = layui.element;
    element.on('nav(test)', function(elem){
      //console.log(elem); //得到当前点击的DOM对象
    });
});
</script>
</body>
</html>